<html>
<head>
    <meta charset="UTF-8"/>
    <title>Highcharts 使用百分比的堆叠柱形图</title>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="http://cdn.highcharts.com.cn/highcharts/8.1.2/highcharts.js"></script>

    <script src="js/Vue/Vue.js"></script>
    <script src="js/Vue/axios.js"></script>
</head>
<body>
<div id="app">
    <button type="button" @click="getAllTypeEnroll">确认</button>
    <br/>
    <div id="container" style="width: 550px; height: 400px; margin: 0 auto;"></div>
    <div id="containerNum" style="width: 550px; height: 400px; margin: 0 auto;"></div>
</div>

<script language="JavaScript">

    var storage=window.localStorage;
    var token =storage.getItem("token");
    var refreshToken =storage.getItem("refreshToken");

    console.log(refreshToken)
    var json = {};
    // 图是柱形图
    var chart = {
        type: 'column'
    };
    // 主标题
    var title = {
        text: '高三升学率预计'
    };

    var titleNum = {
        text: '高三升学人数预计'
    };
    // X 轴

    // Y轴
    var yAxis = {
        min: 0,
        title: {
            text: ''
        }
    };
    // 提示语
    var tooltip = {
        pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.percentage:.2f}%)<br/>',
        shared: true
    };

    var tooltipNum = {
        pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.percentage:.0f}人)<br/>',
        shared: true
    };

    // 按百分比显示
    var plotOptions = {
        column: {
            stacking: 'percent'
        }
    };
    //柱状图显示
    var plotOptionsNum = {
        column: {
            pointPadding: 0.2,
            borderWidth: 0
        }
    };

    var credits = {
        enabled: false
    };

    json.chart = chart;
    json.yAxis = yAxis;
    json.credits = credits;

    new Vue({
        el: "#app",
        data: {
        },
        mounted() {

            axios.get(
                "five" ,{
                    headers: {
                        "token": token,
                        "refreshToken": refreshToken
                    }
                }
            ).then(res => {
                console.log(res.data.data.categories)
                console.log(res.data.data.allTypeEnroll)
                json.xAxis = res.data.data.categories // X 轴
                json.series = res.data.data.allTypeEnroll// 数据
                json.title = title;
                json.tooltip = tooltip;
                json.plotOptions = plotOptions;
                $('#container').highcharts(json);
                json.title = titleNum;
                json.tooltip = tooltipNum;
                json.plotOptions = plotOptionsNum;
                $('#containerNum').highcharts(json);

            })
        },
        methods: {
            getAllTypeEnroll: function () {

                axios.get(
                    "five/" ,{
                        headers: {
                            "token": token,
                            "refreshToken": refreshToken
                        }
                    }
                ).then(res => {
                    console.log(res.data.data.categories)
                    console.log(res.data.data.allTypeEnroll)
                    json.xAxis = res.data.data.categories // X 轴
                    json.series = res.data.data.allTypeEnroll// 数据
                    json.title = title;
                    json.tooltip = tooltip;
                    json.plotOptions = plotOptions;
                    $('#container').highcharts(json);
                    json.title = titleNum;
                    json.tooltip = tooltipNum;
                    json.plotOptions = plotOptionsNum;
                    $('#containerNum').highcharts(json);
                })

            }

        }

    })
</script>
</body>
</html>
